<template>
	<cmDialog v-model="dialogState" modal-title="新增专家" model-width="700px" @close="handleAddCancel">
		<div style="padding: 20px 40px">
			<el-form ref="drafterFormRef" :model="drafterForm" :rules="drafterRules" label-width="120px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="姓名" prop="expertName">
							<el-input v-model="drafterForm.expertName" placeholder="请输入" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="职称/职务" prop="expertTitle">
							<el-input v-model="drafterForm.expertTitle" placeholder="请输入" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="工作单位" prop="expertCompany">
							<el-input v-model="drafterForm.expertCompany" placeholder="请输入" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="联系电话" prop="expertTel">
							<el-input v-model="drafterForm.expertTel" placeholder="请输入" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div class="dialog-foot">
				<el-button @click="handleAddCancel">取消</el-button>
				<el-button type="primary" @click="handleAddFormSubmit(drafterFormRef)">确定</el-button>
			</div>
		</div>
	</cmDialog>
</template>
<script lang="ts" setup>
import cmDialog from '@/components/cm-dialog/index.vue'
import { expertlist } from '@/interface/declare'
import type { FormInstance, FormRules } from 'element-plus'
import { computed, reactive, ref, watch } from 'vue'

const props = defineProps({
	modelValue: Boolean,
	datainfo: {
		type: Object as () => expertlist,
		default: () => ({})
	}
})

const emit = defineEmits(['update:modelValue', 'submit-success', 'close-dialog'])

const dialogState = computed({
	get: () => props.modelValue,
	set: val => emit('update:modelValue', val)
})

const drafterFormRef = ref<FormInstance>()

const drafterForm = reactive<expertlist>({
	expertName: '',
	expertTitle: '',
	expertCompany: '',
	expertTel: '',
	// submitApprovalDelete: 1,
	index: -1
})
const drafterRules = reactive<FormRules>({
	expertName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
	expertTitle: [{ required: true, message: '请输入职称/职务', trigger: 'blur' }],
	expertCompany: [{ required: true, message: '请选择工作单位', trigger: 'blur' }],
	expertTel: [
		{ required: true, message: '请输入', trigger: 'blur' },
		{
			pattern: /^1[3-9]\d{9}$/,
			message: '请输入有效的手机号',
			trigger: 'blur'
		}
	]
})

watch(
	() => props.datainfo,
	newVal => {
		const index = newVal.index ?? -1
		if (newVal && index > -1) {
			console.log(newVal, 'newVal')
			Object.assign(drafterForm, newVal)
		}
	},
	{ immediate: true }
)

const handleAddCancel = () => {
	restForm()
	emit('close-dialog')
	emit('update:modelValue', false)
}

const restForm = () => {
	Object.assign(drafterForm, { id: '' })
	Object.assign(drafterForm, { expertName: '' })
	Object.assign(drafterForm, { expertTitle: '' })
	Object.assign(drafterForm, { expertCompany: '' })
	Object.assign(drafterForm, { expertTel: '' })
	Object.assign(drafterForm, { remark: '' })
	// Object.assign(drafterForm, { submitApprovalDelete: 1 });
	Object.assign(drafterForm, { index: -1 })
}

const handleAddFormSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) {
		return
	}
	await formEl.validate((valid, fields) => {
		if (valid) {
			const submittedData = { ...drafterForm }
			emit('submit-success', submittedData)
			restForm()
		} else {
			console.log('error submit!', fields)
		}
	})
}
</script>
<style lang="scss" scoped>
.dialog-foot {
	display: flex;
	justify-content: center;
	padding-top: 20px;
	margin-bottom: 10px;
}
</style>
